<template>
  <div className="row">

    <!--页头-->
    <div class="col-12 head1">
      <card>
        <div class="row" >
          <span class="deco"></span>
          <h2 class="clearMargin">面向对象程序设计（Java）</h2>

<!--          <a href="#/detail-add" target="_blank" class="card-img-top" style="float: right">-->
            <el-button style="margin-left: 45rem;" type="primary" @click="show3 = !show3">点击切换课程</el-button>
<!--          </a>-->

        </div>
      </card>
    </div>


    <div style="margin-top: 20px; position: relative;">
      <el-collapse-transition>
        <div v-show="show3" style="position: absolute; z-index: 2;">
          <div class="col-12">
           <CourseMenu/>
          </div>
        </div>
      </el-collapse-transition>
    </div>

    <div class="col-12" style="position: relative; z-index: 1;">
      <card>
<!--        <h3 class="card-title">学生信息</h3>-->
        <div class="table-responsive" style="height: 29rem; overflow-x: hidden;overflow-y: hidden">
          <base-table :data="paginatedData"
                      :columns="tableColumns">
            <template slot="columns">
              <th>#</th>
              <th>姓名</th>
              <th style="height: 4rem">头像</th>
              <th>账号</th>
              <th>班级</th>
              <th>专业</th>
              <th>年龄</th>
              <th>性别</th>
              <th>创建时间</th>
              <th>修改时间</th>
            </template>
            <template slot-scope="{row}">
              <td>{{ row.id }}</td>
              <td>{{ row.姓名 }}</td>
              <td>
                <img :src="row.头像" alt="学生头像" style="width: 50px; height: 50px; border-radius: 50%; margin-left: -1rem">
              </td>
              <td>{{ row.账号 }}</td>
              <td>{{ row.班级 }}</td>
              <td>{{ row.专业 }}</td>
              <td>{{ row.年龄 }}</td>
              <td>{{ row.性别 }}</td>
              <td>{{ row.创建时间 }}</td>
              <td>{{ row.修改时间 }}</td>
            </template>

          </base-table>
          <hr style="margin-top: -1rem">
        </div>

        <!--分页-->
        <div style="margin-top: -1rem">
          <el-pagination
            style="margin-left: 27rem;color: #2E65F5"
            v-model="currentPage"
            :page-size="pageSize"
            :total="tableData.length"
            background
            @current-change="handlePageChange"
            layout="prev, pager, next"
            class="rounded-pagination blue-pagination"
          ></el-pagination>
        </div>

        <!--小机器人-->
        <float-btn></float-btn>

      </card>
    </div>

  </div>

</template>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}

</style>

<style>
//下拉菜单
.transition-box {
  //margin-bottom: 10px;
  //width: 200px;
  //height: 100px;
  //border-radius: 4px;
  //background-color: #409EFF;
  //text-align: center;
  //color: #fff;
  //padding: 40px 20px;
  //box-sizing: border-box;
  //margin-right: 20px;
}

.class-menu{
  //background-color: rgb(255, 255, 255) !important;
  height: 32rem;
  width: 71rem;
}

.table > thead > tr > th {
  font-size: 14px !important;
}

.clearMargin {
  margin-bottom: 0.5rem;
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

.head1{
  margin-bottom: -20px!important;
}
</style>

<script>
import {reactiveData as table1} from "vue-chartjs/es/mixins";
import BaseTable from "../components/BaseTable.vue";
import Card from "../components/Cards/Card.vue";
import baseButton from "../components/BaseButton.vue";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from "vue";
import CoursesManage from "./CoursesManage.vue";
import CourseMenu from "./CourseMenu.vue";
import FloatBtn from "../components/FloatBtn.vue";
// import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
Vue.component(CollapseTransition.name, CollapseTransition)
export default {
  components: {
    FloatBtn,
    CourseMenu,
    CoursesManage,
    BaseTable,
    Card,
    baseButton,
  },
  data() {
    return {
      show3: false,
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的数据条数
      tableColumns : ["姓名","头像","账号","班级","专业","年龄","性别","创建时间","修改时间"],
      tableData : [
        {
          id: 1,
          姓名: "超大星",
          头像: require("@/assets/scu/4.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"21",
          账号: "123456",
          性别: "男",
          成绩: "99",
          创建时间:"2024/5/11",
          修改时间:"2024/5/17"
        },
        {
          id: 2,
          姓名: "思小议",
          头像: require("@/assets/scu/2.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"20",
          账号: "234567",
          性别: "女",
          成绩: "89",
          创建时间:"2024/5/17",
          修改时间:"2024/5/17"
        },
        {
          id: 3,
          姓名: "李娜",
          头像: require("@/assets/scu/3.jpg"),
          班级:"计算机212",
          专业:"计算机",
          年龄:"19",
          账号: "2523466142",
          性别: "女",
          成绩: "98",
          创建时间:"2024/1/9",
          修改时间:"2024/1/9"
        },
        {
          id: 4,
          姓名: "刘强",
          头像: require("@/assets/scu/1.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"21",
          账号: "3383234735",
          性别: "男",
          成绩: "78",
          创建时间:"2024/1/9",
          修改时间:"2024/1/9"
        },
        {
          id: 5,
          姓名: "赵敏",
          头像: require("@/assets/scu/7.jpg"),
          班级:"计算机212",
          专业:"计算机",
          年龄:"20",
          账号: "2634324542",
          性别: "女",
          成绩: "78",
          创建时间:"2024/1/10",
          修改时间:"2024/2/14"
        },
        {
          id: 6,
          姓名: '周军',
          头像: require("@/assets/scu/6.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"20",
          账号: '1984234615',
          性别: '男',
          成绩: '79',
          创建时间:"2024/1/10",
          修改时间:"2024/1/10"
        },
        {
          id: 7,
          姓名: '吴秀英',
          头像: require("@/assets/scu/5.jpg"),
          班级:"计算机212",
          专业:"计算机",
          年龄:"19",
          账号: '1784643215',
          性别: '女',
          成绩: '79',
          创建时间:"2024/1/10",
          修改时间:"2024/1/10"
        },
        {
          id: 8,
          姓名: '陈明',
          头像: require("@/assets/scu/4.jpg"),
          班级:"计算机213",
          专业:"计算机",
          年龄:"20",
          账号: '1782344615',
          性别: '男',
          成绩: '78',
          创建时间:"2024/1/10",
          修改时间:"2024/2/14"
        },
        {
          id: 9,
          姓名: '石磊',
          头像: require("@/assets/scu/3.jpg"),
          班级:"计算机215",
          专业:"计算机",
          年龄:"21",
          账号: '1784432615',
          性别: '男',
          成绩: '78',
          创建时间:"2024/1/10",
          修改时间:"2024/2/14"
        },
        {
          id: 10,
          姓名: '刘婷',
          头像: require("@/assets/scu/4.jpg"),
          班级:"计算机213",
          专业:"计算机",
          年龄:"20",
          账号: '1784234615',
          性别: '男',
          成绩: '98',
          创建时间:"2024/2/14",
          修改时间:"2024/3/11"
        },
        {
          id: 11,
          姓名: '李佳琳',
          头像: require("@/assets/scu/6.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"21",
          账号: '1784432615',
          性别: '女',
          成绩: '57',
          创建时间:"2024/3/9",
          修改时间:"2024/3/9"
        },
        {
          id: 12,
          姓名: '王文杰',
          头像: require("@/assets/scu/7.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"21",
          账号: '2782434615',
          性别: '男',
          成绩: '87',
          创建时间:"2024/3/9",
          修改时间:"2024/3/11"
        },
        {
          id: 13,
          姓名: "张伟",
          头像: require("@/assets/scu/1.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"21",
          账号: "3622342738",
          性别: "男",
          成绩: "99",
          创建时间:"2024/1/9",
          修改时间:"2024/1/9"
        },
        {
          id: 14,
          姓名: "王芳",
          头像: require("@/assets/scu/2.jpg"),
          班级:"计算机211",
          专业:"计算机",
          年龄:"20",
          账号: "1232234789",
          性别: "女",
          成绩: "89",
          创建时间:"2024/1/9",
          修改时间:"2024/1/9"
        },
      ]
    };
  },
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.tableData.slice(startIndex, endIndex);
    },
  },
  methods: {
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
  },
};
</script>
